<template>
  <view class="app-container auth-list-page">

    <view class="auth-list">
      <view class="auth-item" v-for="(item,index) in list" :key="item.id">
        <view class="auth-info">
          <view class="name">
            {{ item.memberName }}
            <view class="tag">
              <u-tag :text="item.authState==='2' ?'未认证':'已认证'" plain size="mini"
                     :type="item.authState==='2' ?'warning':'success'"></u-tag>
            </view>
          </view>
          <view class="phone">
            {{ item.memberPhone || ''}}
          </view>
          <view class="idcard">{{ item.idCard || '' }}</view>
        </view>
        <view class="btns" v-if="item.authState==='2'" @click="handleAuth(list[index].memberId)">
          <view class="btn">身份认证</view>
          <!--<u-icon name="arrow-right"></u-icon>-->
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import storage from "@/utils/storage";
import constant from "@/utils/constant";
import {memberList} from "@/api/manager/order";

export default {
  data() {
    return {
      list: []
    };
  },
  onShow() {
    this.getList()
  },
  methods: {
    getList() {
      const orderId = storage.get(constant.room).orderId;
      memberList(orderId).then(res => {
        this.list = res.data.houseMemberList
        // 把authStatus为0的数据排在上面
        this.list.sort((a, b) => {
          //  // 实名状态：1已实名 2未实
          return a.authState === b.authState ? 2 : a.authState === 2 ? -1 : 1;
        });
      })
    },
    handleAuth(memberId) {
      console.log(memberId)
      console.log("item.memberId: " + memberId)
      this.$tab.navigateTo("/pages/manager/auth/facial-verification?memberId=" + memberId)
    }
  }
}
</script>

<style lang="scss">
.auth-list-page {
  .auth-list {
    padding: 20rpx;

    .auth-item {
      display: flex;
      align-items: center;
      padding: 40rpx 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      margin-bottom: 20rpx;

      .auth-info {
        flex: 1;
        padding-left: 20rpx;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #111;
          margin-bottom: 12rpx;
          display: flex;
          justify-items: center;

          .tag {
            display: inline-block;
            margin-left: 16rpx;
          }
        }

        .phone {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          color: #666;
        }

        .idcard {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          color: #666;
        }
      }

      .btns {
        width: 180rpx;
        display: flex;

        .btn {
          padding: 10rpx 20rpx;
          color: #fff;
          font-size: 24rpx;
          border-radius: 8rpx;
          background-color: #FF7947;
        }
      }
    }

  }

}

</style>